<template>
  <div class="parking">
    <p class="title">
      车场泊车统计
      <img style="height: 0.7em;margin-left: 0.3em;" src="../../../../assets/bigDataSourceImage/barTitleIcon.png">
    </p>
    <div id="line"></div>
  </div>
</template>

<script>
  let echarts = require('echarts/lib/echarts');
  require('echarts/lib/chart/line');

  export default {
    name: 'parking',
    data() {
      return {
        date: ["12-10","12-11","12-12","12-13","12-14","昨天","今天"],
        lineOption: {
          tooltip: {
            trigger: 'axis'
          },
          color:['#72BCFF'],
          legend: {
            x: 'right',
            data: [{
              name:'泊车量',
              textStyle:{
                fontSize:10,
                color:'#0fcce4'
              },
              icon:'circle'
            }],
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '8%',
            top: '10%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            color:'red',
            data:  function () {
                var myDate = new Date();
                myDate.setDate(myDate.getDate() - 6);
                var dateArray = [];
                var dateTemp;
                var flag = 1;
                for (var i = 0; i < 6; i++) {
                    dateTemp = (myDate.getMonth()+1)+"-"+myDate.getDate();
                    dateArray.push(dateTemp);
                    myDate.setDate(myDate.getDate() + flag);
                }
                dateArray.splice(5,1,'昨天','今天')
                return dateArray;
            }(),
            axisTick:{ //y轴刻度线
              show:true
            },
            axisLine:{ //x轴
              show:true,
            },
            axisLabel: {
              color:'#ccc',
            },
          },
          yAxis: {
            show: true,
            type: 'value',
            splitNumber:2,
            splitLine:{show: false},   //去除网格线
            nameTextStyle:{
              color:'#abb8ce'
            },
            axisLabel: {
              color:'#0fcce4',
            },
            axisTick:{ //y轴刻度线
              show:false
            },
            axisLine:{ //y轴
              show:true
            }
          },
          series: [
            {
              name: '泊车量',
              type: 'line',
              data: [15, 20, 25, 60, 38, 78, 50],
              symbol: 'none',
              lineStyle:{
                color:'#72BCFF',
                width: '2'
              },
              areaStyle:{
                normal:{
                  //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(80,141,255,0.5)'
                  }, {
                    offset: .34,
                    color: 'rgba(56,155,255,0.2)'
                  },{
                    offset: 1,
                    color: 'rgba(38,197,254,0.00)'
                  }])
                }
              },
            },
          ]
        },
      }
    },
    mounted() {
      let myChartLine = this.$echarts.init(document.getElementById('line'));
      myChartLine.setOption(this.lineOption);
      window.addEventListener("resize",function(){
          myChartLine.resize();
        });
    },
    methods: {

    }
  }
</script>

<style scoped>
  .parking {
    height: 100%;
    padding: 1.4em;
    border: 1px solid transparent;
    border-image-source: url('../../../../assets/bigDataSourceImage/box1.png');
    border-image-slice: 26 26 26 26;
    border-image-repeat: stretch;
    border-image-width: 26px;
    box-sizing: border-box;
  }
  .title {
    margin: 0;
    color: #fff;
    font-size: 0.8em;
  }
  #line {
    height: 100%;
    width: 100%;
  }

</style>
